<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>GLSL Sandbox Diff</title>
		<link rel="stylesheet" type="text/css" href="css/diffview.css"/>
		<script type="text/javascript" src="js/difflib.js"></script>
		<script type="text/javascript" src="js/diffview.js"></script>
		<script type="text/javascript" src='js/jquery.js'></script>
		<style type="text/css">
			body {
				background-color: #000000;
				font: 12px Arial, Helvetica, sans-serif;
				color: #888;
				margin: 20px;
			}
			h2 {
				font-size: 12px;
				text-transform: uppercase;
				font-weight: normal;
				margin: 0px;
				padding-bottom: 20px;
			}
			a, a:visited {
				color: #009DE9;
				text-decoration: none;
			}
			a:hover {
				color: #FFFFFF;
			}
			button {
				background-color: transparent;
				border: none;
				color: #009DE9;
				cursor: pointer;
				padding: 6px 10px;
				border: 1px solid #009DE9;
				border-radius: 4px;
				font-size: 12px;
				text-transform: uppercase;
			}
			button:hover {
				color: #FFF;
				border-color: #FFF;
			}
			#subtitle {
				text-align: center;
				clear: both;
			}
			#diffoutput {
				width: 100%;
			}
			/* give jsdiffview the dark theme */
			table.diff {
				white-space: pre-wrap;
				border:1px solid #334;
				width: 100%;
			}
			table.diff tbody th {
				background: #223;
				border:1px solid #334;
			}
			table.diff thead {
				background: #111;
				border-bottom:1px solid #334;
			}
			table.diff .empty {
				background-color:#222;
			}
			table.diff .replace {
				background-color:#431;
				color: #FD8;
			}
			table.diff .delete {
				background-color:#411;
				color: #f88;
			}
			table.diff .skip {
				background-color:#111;
				border:1px solid #555;
				border-right:1px solid #334;
			}
			table.diff .insert {
				background-color:#141;
				color: #0f0;
			}
			table.diff th.author {
				border-top:1px solid #334;
				background:#111;
			}
		</style>
	</head>
	<body>
		<h2 id="subtitle"></h2>
		<div id="diffoutput">Loading...</div>
		<script>
			var leftSide = { id: '', code: '', name: '', parent: null, loaded: false },
				rightSide = { id: '', code: '', name: '', parent: null, loaded: false };

			function showDiff() {
				var leftText = difflib.stringAsLines(leftSide.code);
				var rightText = difflib.stringAsLines(rightSide.code);
				var sm = new difflib.SequenceMatcher(leftText, rightText);
				var opcodes = sm.get_opcodes();
				var diffoutputdiv = document.getElementById("diffoutput");
				diffoutputdiv.innerHTML = "";
				var table = diffview.buildView({
					baseTextLines: leftText,
					newTextLines: rightText,
					opcodes: opcodes,
					contextSize: null,
					viewType: 1 // sideBySide: 0, viewInline: 1
				});
				table.removeChild(table.firstChild); // not needed
				diffoutputdiv.appendChild(table);
			}

			function computeNames() {
				if (!leftSide.loaded) {
					leftSide.name = 'Not loaded';
				} else if (rightSide.parent === leftSide.id) {
					leftSide.name = 'parent ' + leftSide.id;
				} else {
					leftSide.name = leftSide.id;
				}

				if (!rightSide.loaded) {
					rightSide.name = 'Not loaded';
				} else if (leftSide.parent === rightSide.id) {
					rightSide.name = 'parent ' + rightSide.id;
				} else {
					rightSide.name = rightSide.id;
				}

				document.getElementById('subtitle').innerHTML =
					'<a href="e#' + leftSide.id + '"><button>' + leftSide.name + '</button></a>' +
					'<span style="padding:0 10px">vs</span>' +
					'<a href="e#' + rightSide.id + '"><button>' + rightSide.name + '</button></a>';
			}

			function load_code(side) {
				$.getJSON('item/'+side.id, function(result) {
					side.code = result.code;
					if (result.parent) {
						side.parent = result.parent.substring(3);
					} else {
						side.parent = null;
					}
					side.loaded = true;
					if (leftSide.loaded && rightSide.loaded) {
						computeNames();
						showDiff();
					}
				}).error(function (jqXHR, textStatus, errorThrown) {
					alert(textStatus);
				});
			}

			// hash format: #a-vs-b
			var hash = window.location.hash,
				pos = hash.indexOf('-vs-'),
				newLeftID = null,
				newRightID = null;

			if ((pos < 2) || ((hash.length - pos) < 5)) {
				leftSide.loaded = rightSide.loaded = false;
				leftSide.name = rightSide.name = 'invalid';
				leftSide.code = rightSide.code = 'invalid';
				leftSide.parent = rightSide.parent = null;
				document.getElementById("diffoutput").innerHTML = "Invalid Diff URL.";
			} else {
				newLeftID = hash.substring(1, pos);
				newRightID = hash.substring(pos + 4);
				if (newLeftID !== leftSide.id) {
					leftSide.id = newLeftID;
					leftSide.name = 'Loading...';
					leftSide.code = '';
					leftSide.parent = null;
					leftSide.loaded = false;
				}
				if (newRightID !== rightSide.id) {
					rightSide.id = newRightID;
					rightSide.name = 'Loading...';
					rightSide.code = '';
					rightSide.parent = null;
					rightSide.loaded = false;
				}
				if (!(leftSide.loaded && rightSide.loaded)) {
					document.getElementById("diffoutput").innerHTML = "Loading...";
					if (!leftSide.loaded) {
						load_code(leftSide);
					}
					if (!rightSide.loaded) {
						load_code(rightSide);
					}
				}
			}
		</script>
	</body>
</html>
